<template>
  <!-- 父子传值
          子组件标签   :属性名=父组件属性   @子组件方法名="父组件方法"
          子组件内：
              props:{
                属性名:{
                    type:类型,
                    required:是否必传，
                    default:默认值，基本数据类型直接定义，复杂数据类型（对象(new Date)，数组，function，）：()=>复杂数据类型
                    validator:(value)=>{return boolean  验证数据}
                }
              }
              数据单向数据流：基本数据类型不可修改，复杂数据类型只要不修改引用地址（栈）
              this.$emit('子组件方法名')
 -->
  <div class="item">
    <div class="name">{{ itemInfo.name }}</div>
    <div class="manager">{{ itemInfo.manager }}</div>
    <el-dropdown>
      <div>
        <span>操作</span>
        <i class="el-icon-arrow-down" />
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>添加子部门</el-dropdown-item>
          <el-dropdown-item v-if="!itemInfo.isTop">编辑子部门</el-dropdown-item>
          <el-dropdown-item v-if="!itemInfo.isTop">删除部门</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
<script>
export default {
  props: {
    itemInfo: {
      type: Object,
      required: true
    }
  }
}
</script>
<style lang="scss" scoped>
.item {
  display: flex;
  align-items: center;
  .name {
    flex: 1;
  }
  .manager {
    width: 120px;
  }
}
</style>
